<!--
 * @Author: your name
 * @Date: 2021-02-03 15:30:25
 * @LastEditTime: 2021-05-13 17:39:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\versionService\special.vue
-->
<template>
    <div class="special-modal-box">
        <el-dialog
        :title="$t('version.service.Special.filter')"
        :visible="specialFlag"
        width="900px"
        @opened="SpecialupdateGetPage"
        @close="$emit('update:specialFlag',false)"
        :close-on-click-modal='false'
        >  
            <div class="add-search-box">
                <div class="search-box">
                    <div class="search-box-sub">
                        <span class="lable-text">{{$t('vsite.userType')}}</span>
                        <el-select v-model="userType" filterable :placeholder="$t('pleaseSelect')" @change="changeUserType">
                            <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-box-sub">
                        <span class="lable-text">{{$t('devWifi.loginName')}}</span>
                        <el-select v-model="userId" filterable remote :remote-method="SpecialupdateGetByUserType" :placeholder="$t('common.ple-insert-keyword')">
                            <el-option
                            v-for="item in userList"
                            :key="item.ids"
                            :label="item.loginName"
                            :value="item.ids">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-box-sub">
                        <el-button type="primary" @click="SpecialupdateSave()" :disabled="!userId">{{$t('add')}}</el-button>
                        <el-button type="primary" @click="drawer=true" >批量操作</el-button>
                    </div>
                </div>
            </div>
            <div class="content-user-list-box" v-loading="loading">
                <el-divider content-position="left">{{$t('user.loginName')}}</el-divider>
                <el-row  >
                     <el-col :span="11" class="user-box"  v-for='item in haveUserList' :key='item.sid'>
                        <span class="span-orange">{{item.loginName}}</span>
                        <el-popconfirm
                            :confirm-button-text="$t('sure')"
                            :cancel-button-text="$t('cancel')"
                            :title="$t('confirmDelete')"
                            @confirm='SpecialupdateDelete(item.sid)'
                        >
                            <i class="el-icon-error delete-icon" slot="reference" ></i>
                        </el-popconfirm>
                     </el-col>
                </el-row>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    :current-page="current"
                    :total="total">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="$emit('update:specialFlag',false)">{{$t('close')}}</el-button>
            </span>
        </el-dialog>
        <drawerFilter :drawer.sync='drawer' :id='id' v-if='drawer' @upload='SpecialupdateGetPage'></drawerFilter>
    </div>
</template>

<script>
import drawerFilter from './drawerFilter'
import { type } from 'os';
export default {
    components: {
        drawerFilter
    },  
    props: {
        id:{
            type:String,
            default:""
        },
        specialFlag:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            typeList:[{
                id:'2',
                text:this.$t('firm')
            },{
                id:'3',
                text:this.$t('agent')
            },{
                id:'4',
                text:this.$t('installer')
            }],
            userList:[],
            haveUserList:[],
            userType:'3',
            userId:'',
            current:1,
            total:18,
            loading:false,
            drawer:false,
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
    },
    methods: {
        changeUserType(){
            this.userId=''
            this.userList=[]
        },
        async SpecialupdateGetByUserType(loginName){
            let res=await this.API.SpecialupdateGetByUserType({
                userType:this.userType,
                loginName:loginName
            })
            if(res){
                this.userList=res.object
            }
        },
        async SpecialupdateGetPage(){
            this.loading = true
            let res=await this.API.SpecialupdateGetPage({
                updateVersionId:this.id,
                current:this.current,
                size:10,
                specialType:'1'
            })
            this.loading = false
            this.haveUserList=res.rows
            this.total=res.total
        },
        async SpecialupdateSave(){
            let res=await this.API.SpecialupdateSave({
                userId:this.userId,
                updateVersionId:this.id,
                specialType:'1'
            })
            if(res.success){
                this.SpecialupdateGetPage()
            }else{
                this.$message.error(this.$t('login.js_sign_userName_exist'));
            }
        },
        async SpecialupdateDelete(id){
            let res=await this.API.SpecialupdateDelete({
                id:id
            })
            if(this.comm.showMsg(res.success)){
                console.log(this.total)
                if(this.total%10==1&&this.current==(parseInt(this.total/10)+1)&&this.current>1){
                    this.current--
                }
                this.SpecialupdateGetPage()
            }
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.SpecialupdateGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.SpecialupdateGetPage()
        },
    },
};
</script>

<style  lang="less">
.special-modal-box{
    .el-drawer rtl{
        width: 300px;
    }
    .add-search-box{
        width: 600px;
        margin: 0 auto;
    }
    .content-user-list-box{
        width: 700px;
        margin: 0 auto;
        // background-color: #f1f1f1;
        padding: 10px;
        box-sizing: border-box;
    }
    .el-divider__text.is-left{
        font-size: 17px;
        // font-weight: 550;
        color: #ccc;
    }
    .span-orange{
        color:#fea429;
    }
    .user-box{
        background-color: #f1f1f1;
        padding: 10px;
        margin-bottom:10px;
        margin-right:25px;
        display: flex;
        justify-content: space-between;
        border-radius: 5px;
    }
    .delete-icon{
        color:#fea429;
    }
    .delete-icon:hover{
        color:red;
    }
    .el-dialog__footer{
        padding-top: 20px;
    }
}
</style>
